<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import { getRadarData } from "@/api/chart";
import { notify } from "@/utils/message";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), "dark");
      getRadarData()
        .then((res) => {
          console.log(res.data.data);
          notify(1, "获取雷达图数据");
          let data1 = res.data.data.map((item) => item.value1);
          let data2 = res.data.data.map((item) => item.value2);
          this.chart.setOption({
            title: {
              text: "图书类型的价格与销量关系",
              left: "center",
            },
            legend: {
              top: "4%",
              data: ["图书价格", "图书销量"],
            },
            radar: {
              indicator: [
                { name: "文学作品集", max: 3000 },
                { name: "作品集", max: 2000 },
                { name: "侦探/悬疑/推理", max: 2500 },
                { name: "纪实文学", max: 2000 },
                { name: "随笔", max: 2500 },
                { name: "戏剧", max: 1000 },
                { name: "都市情感", max: 2000 },
                { name: "玄幻惊悚", max: 1000 },
                { name: "文学评论与鉴赏", max: 1000 },
                { name: "历史", max: 1000 },
                { name: "中国近当代小说", max: 2200 },
                { name: "中国古典小说", max: 1500 },
                { name: "古言穿越", max: 2200 },
                { name: "民间文学", max: 1000 },
                { name: "社会生活", max: 1200 },
                { name: "爱情情感", max: 2000 },
                { name: "职场", max: 1000 },
                { name: "诗词歌赋", max: 2000 },
                { name: "校园成长", max: 1000 },
                { name: "文学理论", max: 1000 },
                { name: "爆笑无厘头", max: 500 },
                { name: "影视小说", max: 500 },
                { name: "偶像娱乐", max: 500 },
              ],
            },

            series: [
              {
                name: "图书价格",
                type: "radar",
                data: [
                  {
                    value: data1,
                    name: "图书价格",
                  },
                ],
              },
              {
                name: "图书数量",
                type: "radar",

                data: [
                  {
                    value: data2,
                    name: "图书数量",
                  },
                ],
                lineStyle: {
                  color: "blue",
                },
                itemStyle: {
                  color: "red",
                  borderColor: "red",
                },
              },
            ],
          });
        })
        .catch((err) => {
          notify(2, "获取雷达图数据", err);
        });
    },
  },
};
</script>
